<template>
  <div class="box">
    <div class="hederdiv">
      <el-input style="width: 100%;background-color: transparent;overflow: auto" placeholder="请输入关键字"
                v-model="filterText" @input="filterChange">
        <template #prefix>
          <el-icon>
            <search/>
          </el-icon>
        </template>
      </el-input>
    </div>
    <div :style="{ height: clientHeight - 230 + 'px' }" style="width: 100%">
      <el-tree class="treediv" :data="stationData" :props="defaultProps" @node-click="handleNodeClick"
               :filter-node-method="filterNode" highlight-current node-key="id" ref="popularTree"
               :default-expanded-keys="defaultExpandedKeys" style="height: 100%">
        <template #default="scope">
          <el-tooltip v-if="'f' == scope.data.status" effect="light" :content="scope.data.addr" placement="right">
            <el-button link type="danger"><i :class="scope.data.type"></i> {{ scope.data.name }}</el-button>
          </el-tooltip>
          <el-tooltip v-else-if="'t' == scope.data.status" effect="light" :content="scope.data.addr" placement="right">
            <el-button link type="success"><i :class="scope.data.type"></i> {{ scope.data.name }}</el-button>
          </el-tooltip>
          <span v-else> <i :class="scope.data.type"></i> {{ scope.data.name }} </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script lang="ts">
import useView from "@/hooks/useView";
import {defineComponent, reactive, toRefs} from "vue";
import baseService from "@/service/baseService";

export default defineComponent({
  name: "RealTimeTree",
  setup() {
    const state = reactive({
      clientHeight: document.body.clientHeight,
      filterText: "",
      stationData: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      defaultExpandedKeys: [], // 初始为空数组
    });
    return {...useView(state), ...toRefs(state)};
  },
  created() {
    this.getInfo();
  },
  methods: {
    // 获取信息
    getInfo() {
      baseService.get(`/KxStation/kxstation/getListImgsTree`).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        this.getAllKeys(res.data.list);
        this.stationData = res.data.list;
      });
    },
    // 默认展开
    getAllKeys(nodes: any) {
      nodes.forEach((node: { id: never, children: any }) => {
        this.defaultExpandedKeys.push(node.id);
        if (node.children && node.children.length) {
          this.getAllKeys(node.children);
        }
      });
    },
    filterChange() {
      // 这里每当输入的数据有变化就触发原生的过滤节点这个函数
      this.$refs.popularTree.filter(this.filterText);
    },
    filterNode(value: string, data: any, node: any) {
      // return data.label.includes(value)
      if (!value) return true;
      let parentNode = node.parent;
      let labels = [node.label];
      let level = 1;
      while (level < node.level) {
        labels = [...labels, parentNode.label];
        parentNode = parentNode.parent;
        level++;
      }
      return labels.some((label) => label.indexOf(value) !== -1);
    },
    handleNodeClick(data: any) {
      this.$emit("playVideo", data);
    },
  }
});
</script>

<style lang="scss" scoped>
// el-tree鼠标悬浮背景色
::v-deep .el-tree .el-tree-node__content:hover,
.el-upload-list__item:hover {
  background-color: transparent;
  color: #FFF118;
}

::v-deep .el-tree .el-tree-node__content {
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
}

//背景色设置为透明
:deep(.el-input__wrapper) {
  background-color: rgba(0, 0, 0, 0);
  background-image: url("../imgs/input_bj.png");
  background-size: 100% 100%;
}

//树选中样式
::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: transparent;
  font-weight: 400;
  font-size: 14px;
  color: #00C4FF;
}

//输入框颜色
:deep(.el-input__inner) {
  background-color: rgba(0, 0, 0, 0) !important;
  color: #FFF118;
  border: 0;
}

::v-deep .el-input__wrapper {
  box-shadow: none;
  border-bottom: 0 solid #dcdfe6;
}

::v-deep .el-input__wrapper.is-focus {
  box-shadow: none;
  //border-bottom: 1px solid #07c160;
}

::v-deep .el-input__wrapper:hover {
  box-shadow: none;
  //border-bottom: 1px solid #07c160;
}

.box {
  height: 100%;
  padding: 10px;
  overflow: hidden;
  position: relative;
  padding-top: 50px;
  color: #bed4e2;

  .hederdiv {
    position: absolute;
    top: 0px;
    left: 10px;
    right: 10px;
    padding-top: 10px;

    .zsum {
      height: 66px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background-image: url(../imgs/camera_1.png);
      background-size: 100% 100%;
      background-position: bottom;
      background-repeat: no-repeat;
      padding: 10px 20px;

      .zsum-s {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #CEFAFB;
      }

      .sum {
        width: 90px;
        color: #12dbf2;
        font-size: 26px;
        font-weight: 700;
        text-align: center;
      }
    }

    .zsum-tow {
      height: 28px;
      width: 100%;
      background-image: url(../imgs/camera_bg_2.png);
      background-size: 100% 100%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      margin: 6px 0;

      .zzst {
        flex: 0.5;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;
        padding: 0 14px;
      }
    }

    .input {
      margin-top: 0;
    }
  }

  .treediv {
    overflow: auto;
    padding: 0;
    background-color: transparent;
  }
}
</style>

<style lang="scss">
// /* 自定义滚动条样式 */
// ::-webkit-scrollbar {
//   width: 4px; /* 滚动条宽度 */
// }

// /* 滚动条轨道 */
// ::-webkit-scrollbar-track {
//   background-color: #ffffff; /* 轨道背景颜色 */
// }

// /* 滚动条滑块 */
// ::-webkit-scrollbar-thumb {
//   background-color: rgb(0, 229, 255); /* 滑块背景颜色 */
// }

// /* 滚动条滑块悬停状态 */
// ::-webkit-scrollbar-thumb:hover {
//   background-color: #e6e6e6; /* 悬停状态下滑块背景颜色 */
// }

// .live-tree {
//   background-color: #022531 !important;
//   color: rgb(18, 219, 242);
// }


</style>
